<template>
    <div id="PersonalDetails">
       <div class="header"><img class="return_img" src="@/assets/Return.png" style="width:.23rem;height:.4rem;" v-on:click="back">个人绩效目标</div>
        <div class="personaldetails">
            <tab>
                <tab-item selected @on-item-click="onItemClick">邀请订单(￥{{Math.floor(sellPrice*100)/100}})</tab-item>
                <tab-item @on-item-click="onItemClick">邀请会员({{ userNumberList_length }})</tab-item>
            </tab>
            <div class="personaldetails_content">
                <popup-picker value-text-align="left" :data="[List_time]" v-model="value">
                    <template slot="title" slot-scope="props">
                    <span style="vertical-align:middle;"><img class="img" src="@/assets/calendar.png" alt="" width="16"></span>
                    </template> 
                </popup-picker>
                <ul v-if="index ==0">
                    <li  v-if="orderList.length == 0" style="text-align:center;height:0;padding:0;">
                            <img class="no_data" src="@/assets/no_data.png" alt="">
                    </li>
                    <li v-for="(item,index) in orderList" :key="index">
                        <div class="personaldetails_l left">
                            <p class="left"><img :src="item.headImg?item.headImg:require('@/assets/member_img.png')" alt="" width="41"></p>
                            <div class="left">
                                <p>{{ item.nickName }}</p>
                                <p>{{ item.createTime }}</p>
                            </div>
                        </div>
                        <div class="personaldetails_r right">
                            <p class="price">￥{{ item.sellPrice }}</p>
                        </div>
                        <b></b>
                    </li>
                    
                </ul>
                <ul  v-if="index ==1">
                    <li  v-if="userNumberList.length == 0" style="text-align:center;height:0;padding:0;">
                            <img class="no_data" src="@/assets/no_data.png" alt="">
                    </li>
                    <li v-for="(item,index) in userNumberList" :key="index">
                        <div class="personaldetails_l left">
                            <p class="left"><img :src="item.headImg?item.headImg:require('@/assets/member_img.png')" alt="" width="41"></p>
                            <div class="left">
                                <p>{{ item.name }}</p>
                                <p>{{ item.nickName }}</p>
                                <!-- <p>{{ item.createTime }}</p> -->
                            </div>
                        </div>
                        <div class="personaldetails_r right">
                            <p>{{ item.createTime }}</p>
                        </div>
                        <b></b>
                    </li>
                </ul>
            </div>           
        </div>
    </div>
</template>
<script>
import { XHeader, Tab, TabItem, PopupPicker } from "vux";
import {
  getTargetList,
  getTargetDetailedList,
  getPriceAgreement
} from "@/service/home.js";
export default {
  components: { XHeader, Tab, TabItem, PopupPicker },
  data() {
    return {
      token: localStorage.getItem('token'),
      targetId: localStorage.targetId,
      // value: sessionStorage.value,
      value: ["1"],
      List_time: [],
      targetList: "", //时间
      userNumberList: "", //拉新记录
      userNumberList_length: "",
      orderList: "", //邀请订单
      index: 0,
      listData: JSON.parse(localStorage.getItem("listData")),
      sellPrice: ""
    };
  },
  mounted() {
    this._getTargetDetailedList();
    this._add_time();
  },
  watch: {
    value(newName, oldName) {
      this.value.join(",");
      var str = this.value[0].substring(0, 10);
      this.targetList.forEach(item => {
        if (item.startTime == str) {
          this.targetId = item.targetId;
          if (newName) {
            localStorage.setItem("newName", newName);
            this._getTargetDetailedList();
          }
        }
      });
    }
  },
  methods: {
    // 获取列表数据
    _getTargetDetailedList() {
      var data = {
        targetId: this.targetId
      };
      getTargetDetailedList(data).then(res => {
        this.userNumberList = res.data.userNumberList;
        this.orderList = res.data.orderList;
        this.userNumberList_length = this.userNumberList.length;
        var sellPrice = 0;
        this.orderList.forEach(item => {
          sellPrice += item.sellPrice;
        });
        this.sellPrice = sellPrice;
      });
    },
    //获取时间
    _add_time() {
      getTargetList().then(res => {
        this.targetList = res.data.targetList;
        this.targetList.forEach((item, index) => {
          var time = item.startTime + "至" + item.endTime;
          this.List_time.push(time);
          var array = [];
          array.push(localStorage.newName);
          this.value = array;
        });
      });
    },
    //切换导航
    onItemClick(index) {
      this.index = index;
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>
<style scoped lang="less">
#PersonalDetails {
  .vux-header {
    background: #fff;
    .vux-header-title {
      color: #000000 !important;
    }
  }
  .personaldetails {
    width: 100%;
    height: 700px;
    background-image: linear-gradient(top, #8239d0, #d275f4);
    position: relative;
    .vux-cell-box {
      margin-bottom: 15px;
      margin-top: 15px;
      color: #fff;
      overflow: hidden;
      .vux-popup-picker-select {
        color: #fff;
        .vux-popup-picker-value {
          float: left;
        }
      }
    }
    .img {
      position: absolute;
      top: 0;
      right: 0;
      width: 0.42rem;
      height: 0.44rem;
    }
    .personaldetails_content {
      width: 94%;
      margin: 0 auto;
      ul {
        border-radius: 5px;
        background: #fff;
        li {
          box-sizing: content-box;
          height: 1.2rem;
          padding: 0.1rem;
          .personaldetails_l {
            p {
              margin-right: 15px;
            }
            img {
              border-radius: 50%;
            }
          }
          .personaldetails_r {
            color: #666666;
            .price {
              color: red;
            }
          }
          b {
            width: 100%;
            height: 1px;
            background: rgb(221, 221, 221);
            display: inline-block;
          }
        }
      }
    }
  }
}
.vux-cell-box:not(:first-child):before {
  border-top: none !important;
}
.left-arrow:before {
  border: 1px solid #000000 !important;
  border-width: 1px 0 0 1px !important;
}
</style>

